รูปแบบ useReducer ของ React: การจัดการ State ที่ซับซ้อนอย่างเชี่ยวชาญ

ในโลกของการพัฒนา front-end ที่เปลี่ยนแปลงอยู่เสมอ React ได้สร้างตัวเองขึ้นมาเป็นเฟรมเวิร์กชั้นนำสำหรับการสร้างส่วนติดต่อผู้ใช้ (user interfaces) เมื่อแอปพลิเคชันมีความซับซ้อนมากขึ้น การจัดการ state ก็กลายเป็นสิ่งที่ท้าทายยิ่งขึ้น hook useState เป็นวิธีที่ง่ายในการจัดการ state ภายในคอมโพเนนต์ แต่สำหรับสถานการณ์ที่ซับซ้อนกว่านั้น React มีทางเลือกที่ทรงพลังกว่า นั่นคือ hook useReducer บทความนี้จะเจาะลึกเกี่ยวกับรูปแบบของ useReducer สำรวจประโยชน์ การนำไปใช้งานจริง และวิธีที่มันสามารถปรับปรุงแอปพลิเคชัน React ของคุณในระดับโลกได้อย่างมีนัยสำคัญ

ทำความเข้าใจความจำเป็นในการจัดการ State ที่ซับซ้อน

เมื่อสร้างแอปพลิเคชัน React เรามักจะพบกับสถานการณ์ที่ state ของคอมโพเนนต์ไม่ได้เป็นเพียงค่าธรรมดา แต่เป็นชุดข้อมูลที่เชื่อมโยงกันหรือ state ที่ขึ้นอยู่กับค่า state ก่อนหน้า ลองพิจารณาตัวอย่างเหล่านี้:

• การยืนยันตัวตนผู้ใช้ (User Authentication): การจัดการสถานะการล็อกอิน รายละเอียดผู้ใช้ และโทเค็นการยืนยันตัวตน
• การจัดการฟอร์ม (Form Handling): การติดตามค่าของช่องข้อมูลหลายช่อง ข้อผิดพลาดในการตรวจสอบความถูกต้อง และสถานะการส่งข้อมูล
• ตะกร้าสินค้า E-commerce: การจัดการรายการสินค้า จำนวน ราคา และข้อมูลการชำระเงิน
• แอปพลิเคชันแชทแบบเรียลไทม์ (Real-time Chat): การจัดการข้อความ สถานะการออนไลน์ของผู้ใช้ และสถานะการเชื่อมต่อ

ในสถานการณ์เหล่านี้ การใช้ useState เพียงอย่างเดียวอาจทำให้โค้ดซับซ้อนและจัดการได้ยาก การอัปเดตตัวแปร state หลายตัวพร้อมกันเพื่อตอบสนองต่อเหตุการณ์เดียวอาจกลายเป็นเรื่องยุ่งยาก และตรรกะในการจัดการการอัปเดตเหล่านี้อาจกระจัดกระจายไปทั่วคอมโพเนนต์ ทำให้ยากต่อการทำความเข้าใจและบำรุงรักษา นี่คือจุดที่ useReducer เข้ามามีบทบาท

แนะนำ useReducer Hook

useReducer hook เป็นทางเลือกแทน useState สำหรับการจัดการตรรกะของ state ที่ซับซ้อน โดยมีพื้นฐานมาจากหลักการของรูปแบบ Redux แต่ถูกนำมาใช้ภายในคอมโพเนนต์ของ React เอง ซึ่งช่วยลดความจำเป็นในการใช้ไลบรารีภายนอกในหลายๆ กรณี มันช่วยให้คุณสามารถรวมศูนย์ตรรกะการอัปเดต state ของคุณไว้ในฟังก์ชันเดียวที่เรียกว่า reducer

useReducer hook รับอาร์กิวเมนต์สองตัว:

• ฟังก์ชัน reducer: นี่คือ pure function ที่รับ state ปัจจุบันและ action เป็นอินพุต และส่งคืน state ใหม่
• state เริ่มต้น (initial state): นี่คือค่าเริ่มต้นของ state

hook นี้จะส่งคืนอาร์เรย์ที่มีสององค์ประกอบ:

• state ปัจจุบัน: นี่คือค่าปัจจุบันของ state
• ฟังก์ชัน dispatch: ฟังก์ชันนี้ใช้เพื่อกระตุ้นการอัปเดต state โดยการ dispatch actions ไปยัง reducer

ฟังก์ชัน Reducer

ฟังก์ชัน reducer คือหัวใจของรูปแบบ useReducer มันเป็น pure function ซึ่งหมายความว่าไม่ควรมี side effects ใดๆ (เช่น การเรียก API หรือการแก้ไขตัวแปรส่วนกลาง) และควรส่งคืนผลลัพธ์เดิมเสมอสำหรับอินพุตเดียวกัน ฟังก์ชัน reducer รับอาร์กิวเมนต์สองตัว:

• state: state ปัจจุบัน
• action: อ็อบเจกต์ที่อธิบายว่าควรจะเกิดอะไรขึ้นกับ state โดยปกติแล้ว actions จะมีคุณสมบัติ type ที่ระบุประเภทของ action และคุณสมบัติ payload ที่มีข้อมูลที่เกี่ยวข้องกับ action นั้น

ภายในฟังก์ชัน reducer คุณจะใช้คำสั่ง switch หรือ if/else if เพื่อจัดการกับ action type ต่างๆ และอัปเดต state ตามนั้น ซึ่งจะช่วยรวมศูนย์ตรรกะการอัปเดต state ของคุณและทำให้ง่ายต่อการทำความเข้าใจว่า state เปลี่ยนแปลงอย่างไรเพื่อตอบสนองต่อเหตุการณ์ต่างๆ

ฟังก์ชัน Dispatch

ฟังก์ชัน dispatch เป็นเมธอดที่คุณใช้เพื่อกระตุ้นการอัปเดต state เมื่อคุณเรียกใช้ dispatch(action), action จะถูกส่งไปยังฟังก์ชัน reducer ซึ่งจะทำการอัปเดต state ตาม type และ payload ของ action นั้น

ตัวอย่างการใช้งานจริง: การสร้างตัวนับ (Counter)

เริ่มต้นด้วยตัวอย่างง่ายๆ: คอมโพเนนต์ตัวนับ สิ่งนี้จะแสดงให้เห็นแนวคิดพื้นฐานก่อนที่จะไปยังตัวอย่างที่ซับซ้อนยิ่งขึ้น เราจะสร้างตัวนับที่สามารถเพิ่มค่า ลดค่า และรีเซ็ตได้:

            
import React, { useReducer } from 'react';

// Define action types
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';
const RESET = 'RESET';

// Define the reducer function
function counterReducer(state, action) {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + 1 };
    case DECREMENT:
      return { count: state.count - 1 };
    case RESET:
      return { count: 0 };
    default:
      return state;
  }
}

function Counter() {
  // Initialize useReducer
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: INCREMENT })}>Increment</button>
      <button onClick={() => dispatch({ type: DECREMENT })}>Decrement</button>
      <button onClick={() => dispatch({ type: RESET })}>Reset</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

ในตัวอย่างนี้:

• เรากำหนดประเภทของ action เป็นค่าคงที่เพื่อการบำรุงรักษาที่ดีขึ้น (INCREMENT, DECREMENT, RESET)
• ฟังก์ชัน counterReducer รับ state ปัจจุบันและ action โดยใช้คำสั่ง switch เพื่อกำหนดวิธีการอัปเดต state ตามประเภทของ action
• state เริ่มต้นคือ { count: 0 }
• ฟังก์ชัน dispatch ถูกใช้ในตัวจัดการการคลิกปุ่มเพื่อกระตุ้นการอัปเดต state ตัวอย่างเช่น dispatch({ type: INCREMENT }) จะส่ง action ประเภท INCREMENT ไปยัง reducer

การขยายตัวอย่างตัวนับ: การเพิ่ม Payload

ลองแก้ไขตัวนับเพื่อให้สามารถเพิ่มค่าตามจำนวนที่ระบุได้ สิ่งนี้จะแนะนำแนวคิดของ payload ใน action:

            
import React, { useReducer } from 'react';

const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';
const RESET = 'RESET';
const SET_VALUE = 'SET_VALUE';

function counterReducer(state, action) {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + action.payload };
    case DECREMENT:
      return { count: state.count - action.payload };
    case RESET:
      return { count: 0 };
    case SET_VALUE:
      return { count: action.payload };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });
  const [inputValue, setInputValue] = React.useState(1);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: INCREMENT, payload: parseInt(inputValue) || 1 })}>Increment by {inputValue}</button>
      <button onClick={() => dispatch({ type: DECREMENT, payload: parseInt(inputValue) || 1 })}>Decrement by {inputValue}</button>
      <button onClick={() => dispatch({ type: RESET })}>Reset</button>
       <input
         type="number"
         value={inputValue}
         onChange={(e) => setInputValue(e.target.value)}
       />
      </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

ในตัวอย่างที่ขยายนี้:

• เราได้เพิ่ม action type SET_VALUE
• actions INCREMENT และ DECREMENT ตอนนี้ยอมรับ payload ซึ่งแทนจำนวนที่จะเพิ่มหรือลด parseInt(inputValue) || 1 ช่วยให้แน่ใจว่าค่าเป็นจำนวนเต็มและมีค่าเริ่มต้นเป็น 1 หากอินพุตไม่ถูกต้อง
• เราได้เพิ่มช่องป้อนข้อมูลเพื่อให้ผู้ใช้สามารถกำหนดค่าการเพิ่ม/ลดได้

ประโยชน์ของการใช้ useReducer

รูปแบบ useReducer มีข้อดีหลายประการเหนือกว่าการใช้ useState โดยตรงสำหรับการจัดการ state ที่ซับซ้อน:

• ตรรกะของ State ที่รวมศูนย์ (Centralized State Logic): การอัปเดต state ทั้งหมดจะถูกจัดการภายในฟังก์ชัน reducer ทำให้ง่ายต่อการทำความเข้าใจและดีบักการเปลี่ยนแปลงของ state
• การจัดระเบียบโค้ดที่ดีขึ้น (Improved Code Organization): โดยการแยกตรรกะการอัปเดต state ออกจากตรรกะการเรนเดอร์ของคอมโพเนนต์ โค้ดของคุณจะมีการจัดระเบียบและอ่านง่ายขึ้น ซึ่งส่งเสริมการบำรุงรักษาโค้ดที่ดีขึ้น
• การอัปเดต State ที่คาดเดาได้ (Predictable State Updates): เนื่องจาก reducer เป็น pure function คุณจึงสามารถคาดเดาได้อย่างง่ายดายว่า state จะเปลี่ยนแปลงอย่างไรเมื่อได้รับ action และ state เริ่มต้นที่เฉพาะเจาะจง ซึ่งทำให้การดีบักและการทดสอบง่ายขึ้นมาก
• การเพิ่มประสิทธิภาพ (Performance Optimization): useReducer สามารถช่วยเพิ่มประสิทธิภาพได้ โดยเฉพาะอย่างยิ่งเมื่อการอัปเดต state มีการคำนวณที่ซับซ้อน React สามารถปรับปรุงการ re-render ได้อย่างมีประสิทธิภาพมากขึ้นเมื่อตรรกะการอัปเดต state อยู่ใน reducer
• ความสามารถในการทดสอบ (Testability): Reducer เป็น pure function ซึ่งทำให้ง่ายต่อการทดสอบ คุณสามารถเขียน unit test เพื่อให้แน่ใจว่า reducer ของคุณจัดการกับ actions และ state เริ่มต้นต่างๆ ได้อย่างถูกต้อง
• ทางเลือกแทน Redux (Alternatives to Redux): สำหรับแอปพลิเคชันจำนวนมาก useReducer เป็นทางเลือกที่เรียบง่ายกว่า Redux โดยไม่จำเป็นต้องใช้ไลบรารีแยกต่างหากและไม่ต้องเสียเวลาในการกำหนดค่าและจัดการ ซึ่งสามารถทำให้เวิร์กโฟลว์การพัฒนาของคุณคล่องตัวขึ้น โดยเฉพาะสำหรับโปรเจกต์ขนาดเล็กถึงขนาดกลาง

เมื่อใดควรใช้ useReducer

แม้ว่า useReducer จะมีประโยชน์อย่างมาก แต่ก็ไม่ใช่ตัวเลือกที่เหมาะสมเสมอไป พิจารณาใช้ useReducer เมื่อ:

• คุณมีตรรกะของ state ที่ซับซ้อนซึ่งเกี่ยวข้องกับตัวแปร state หลายตัว
• การอัปเดต state ขึ้นอยู่กับ state ก่อนหน้า (เช่น การคำนวณผลรวมสะสม)
• คุณต้องการรวมศูนย์และจัดระเบียบตรรกะการอัปเดต state ของคุณเพื่อการบำรุงรักษาที่ดีขึ้น
• คุณต้องการปรับปรุงความสามารถในการทดสอบและการคาดเดาของการอัปเดต state ของคุณ
• คุณกำลังมองหารูปแบบที่คล้ายกับ Redux โดยไม่ต้องเพิ่มไลบรารีแยกต่างหาก

สำหรับการอัปเดต state แบบง่ายๆ useState มักจะเพียงพอและใช้งานง่ายกว่า พิจารณาความซับซ้อนของ state ของคุณและโอกาสในการเติบโตเมื่อตัดสินใจ

แนวคิดและเทคนิคขั้นสูง

การรวม useReducer กับ Context

สำหรับการจัดการ global state หรือการแชร์ state ระหว่างคอมโพเนนต์หลายๆ ตัว คุณสามารถรวม useReducer เข้ากับ Context API ของ React ได้ วิธีการนี้มักเป็นที่นิยมมากกว่า Redux สำหรับโปรเจกต์ขนาดเล็กถึงขนาดกลางที่คุณไม่ต้องการเพิ่ม dependency พิเศษ

            
import React, { createContext, useReducer, useContext } from 'react';

// Define action types and reducer (as before)
const INCREMENT = 'INCREMENT';
// ... (other action types and the counterReducer function)

const CounterContext = createContext();

function CounterProvider({ children }) {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (
    <CounterContext.Provider value={{ state, dispatch }}>
      {children}
    </CounterContext.Provider>
  );
}

function useCounter() {
  return useContext(CounterContext);
}

function Counter() {
  const { state, dispatch } = useCounter();

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: INCREMENT })}>Increment</button>
    </div>
  );
}

function App() {
  return (
    <CounterProvider>
      <Counter />
    </CounterProvider>
  );
}

export default App;

            

              
                Copy
              
            
          

ในตัวอย่างนี้:

• เราสร้าง CounterContext โดยใช้ createContext
• CounterProvider จะครอบแอปพลิเคชัน (หรือส่วนที่ต้องการเข้าถึง state ของตัวนับ) และให้ state และ dispatch จาก useReducer
• hook useCounter ช่วยให้การเข้าถึง context ภายในคอมโพเนนต์ลูกง่ายขึ้น
• คอมโพเนนต์อย่าง Counter ตอนนี้สามารถเข้าถึงและแก้ไข state ของตัวนับได้ทั่วทั้งแอปพลิเคชัน ซึ่งช่วยลดความจำเป็นในการส่ง state และฟังก์ชัน dispatch ผ่านคอมโพเนนต์หลายระดับ ทำให้การจัดการ props ง่ายขึ้น

การทดสอบ useReducer

การทดสอบ reducer นั้นตรงไปตรงมาเพราะเป็น pure function คุณสามารถทดสอบฟังก์ชัน reducer แยกต่างหากได้อย่างง่ายดายโดยใช้เฟรมเวิร์กการทดสอบ unit test เช่น Jest หรือ Mocha นี่คือตัวอย่างการใช้ Jest:

            
import { counterReducer } from './counterReducer'; // Assuming counterReducer is in a separate file

const INCREMENT = 'INCREMENT';

describe('counterReducer', () => {
  it('should increment the count', () => {
    const state = { count: 0 };
    const action = { type: INCREMENT };
    const newState = counterReducer(state, action);
    expect(newState.count).toBe(1);
  });

   it('should return the same state for unknown action types', () => {
        const state = { count: 10 };
        const action = { type: 'UNKNOWN_ACTION' };
        const newState = counterReducer(state, action);
        expect(newState).toBe(state); // Assert that the state hasn't changed
    });
});

            

              
                Copy
              
            
          

การทดสอบ reducer ของคุณช่วยให้มั่นใจว่ามันทำงานตามที่คาดไว้และทำให้การปรับโครงสร้างตรรกะของ state ของคุณง่ายขึ้น นี่เป็นขั้นตอนที่สำคัญในการสร้างแอปพลิเคชันที่แข็งแกร่งและบำรุงรักษาได้

การเพิ่มประสิทธิภาพด้วย Memoization

เมื่อทำงานกับ state ที่ซับซ้อนและการอัปเดตบ่อยครั้ง ลองพิจารณาใช้ useMemo เพื่อเพิ่มประสิทธิภาพของคอมโพเนนต์ของคุณ โดยเฉพาะอย่างยิ่งหากคุณมีค่าที่คำนวณมาจาก state ตัวอย่างเช่น:

            
import React, { useReducer, useMemo } from 'react';

function reducer(state, action) {
  // ... (reducer logic) 
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);

  // Calculate a derived value, memoizing it with useMemo
  const derivedValue = useMemo(() => {
    // Expensive calculation based on state
    return state.value1 + state.value2;
  }, [state.value1, state.value2]); // Dependencies:  recalculate only when these values change

  return (
    <div>
      <p>Derived Value: {derivedValue}</p>
      <button onClick={() => dispatch({ type: 'UPDATE_VALUE1', payload: 10 })}>Update Value 1</button>
      <button onClick={() => dispatch({ type: 'UPDATE_VALUE2', payload: 20 })}>Update Value 2</button>
    </div>
  );
}

            

              
                Copy
              
            
          

ในตัวอย่างนี้ derivedValue จะถูกคำนวณใหม่ก็ต่อเมื่อ state.value1 หรือ state.value2 เปลี่ยนแปลงเท่านั้น ซึ่งช่วยป้องกันการคำนวณที่ไม่จำเป็นในทุกๆ การ re-render วิธีการนี้เป็นแนวทางปฏิบัติทั่วไปเพื่อให้แน่ใจว่าประสิทธิภาพการเรนเดอร์ดีที่สุด

ตัวอย่างและกรณีการใช้งานในโลกจริง

มาสำรวจตัวอย่างการใช้งานจริงบางส่วนที่ useReducer เป็นเครื่องมือที่มีค่าในการสร้างแอปพลิเคชัน React สำหรับผู้ใช้ทั่วโลก โปรดทราบว่าตัวอย่างเหล่านี้ถูกทำให้ง่ายขึ้นเพื่อแสดงแนวคิดหลัก การใช้งานจริงอาจเกี่ยวข้องกับตรรกะและ dependency ที่ซับซ้อนกว่านี้

1. ตัวกรองสินค้า E-commerce

ลองนึกภาพเว็บไซต์ E-commerce (เช่น แพลตฟอร์มยอดนิยมอย่าง Amazon หรือ AliExpress ที่มีให้บริการทั่วโลก) ที่มีแคตตาล็อกสินค้าขนาดใหญ่ ผู้ใช้จำเป็นต้องกรองสินค้าตามเกณฑ์ต่างๆ (ช่วงราคา, แบรนด์, ขนาด, สี, ประเทศผู้ผลิต ฯลฯ) useReducer เหมาะอย่างยิ่งสำหรับการจัดการ state ของตัวกรอง

            
import React, { useReducer } from 'react';

const initialState = {
  priceRange: { min: 0, max: 1000 },
  brand: [], // Array of selected brands
  color: [], // Array of selected colors
  //... other filter criteria
};

function filterReducer(state, action) {
  switch (action.type) {
    case 'UPDATE_PRICE_RANGE':
      return { ...state, priceRange: action.payload };
    case 'TOGGLE_BRAND':
      const brand = action.payload;
      return { ...state, brand: state.brand.includes(brand) ? state.brand.filter(b => b !== brand) : [...state.brand, brand] };
    case 'TOGGLE_COLOR':
      // Similar logic for color filtering
      return { ...state, color: state.color.includes(action.payload) ? state.color.filter(c => c !== action.payload) : [...state.color, action.payload] };
    // ... other filter actions
    default:
      return state;
  }
}

function ProductFilter() {
  const [state, dispatch] = useReducer(filterReducer, initialState);

  // UI components for selecting filter criteria and triggering dispatch actions
  // For example: Range input for price, checkboxes for brands, etc.

  return (
    <div>
      <!-- Filter UI elements -->
    </div>
  );
}

            

              
                Copy
              
            
          

ตัวอย่างนี้แสดงวิธีการจัดการเกณฑ์การกรองหลายรายการในลักษณะที่ควบคุมได้ เมื่อผู้ใช้ปรับเปลี่ยนการตั้งค่าตัวกรองใดๆ (ราคา, แบรนด์ ฯลฯ) reducer จะอัปเดต state ของตัวกรองตามนั้น จากนั้นคอมโพเนนต์ที่รับผิดชอบในการแสดงสินค้าจะใช้ state ที่อัปเดตแล้วเพื่อกรองสินค้าที่แสดง รูปแบบนี้สนับสนุนการสร้างระบบการกรองที่ซับซ้อนซึ่งพบได้ทั่วไปในแพลตฟอร์ม E-commerce ทั่วโลก

2. ฟอร์มหลายขั้นตอน (เช่น ฟอร์มการจัดส่งระหว่างประเทศ)

แอปพลิเคชันจำนวนมากมีฟอร์มหลายขั้นตอน เช่น ฟอร์มที่ใช้สำหรับการจัดส่งระหว่างประเทศหรือการสร้างบัญชีผู้ใช้ที่มีข้อกำหนดที่ซับซ้อน useReducer มีความสามารถยอดเยี่ยมในการจัดการ state ของฟอร์มดังกล่าว

            
import React, { useReducer } from 'react';

const initialState = {
  step: 1, // Current step in the form
  formData: {
    firstName: '',
    lastName: '',
    address: '',
    city: '',
    country: '',
    // ... other form fields
  },
  errors: {},
};

function formReducer(state, action) {
  switch (action.type) {
    case 'NEXT_STEP':
      return { ...state, step: state.step + 1 };
    case 'PREV_STEP':
      return { ...state, step: state.step - 1 };
    case 'UPDATE_FIELD':
      return { ...state, formData: { ...state.formData, [action.payload.field]: action.payload.value } };
    case 'SET_ERRORS':
      return { ...state, errors: action.payload };
    case 'SUBMIT_FORM':
      // Handle form submission logic here, e.g., API calls
      return state;
    default:
      return state;
  }
}

function MultiStepForm() {
  const [state, dispatch] = useReducer(formReducer, initialState);

  // Rendering logic for each step of the form
  // Based on the current step in the state
  const renderStep = () => {
    switch (state.step) {
      case 1:
        return <Step1 formData={state.formData} dispatch={dispatch} />;
      case 2:
        return <Step2 formData={state.formData} dispatch={dispatch} />;
      // ... other steps
      default:
        return <p>Invalid Step</p>;
    }
  };

  return (
    <div>
      {renderStep()}
      <!-- Navigation buttons (Next, Previous, Submit) based on the current step -->
    </div>
  );
}

            

              
                Copy
              
            
          

สิ่งนี้แสดงให้เห็นถึงวิธีการจัดการช่องข้อมูลต่างๆ ของฟอร์ม ขั้นตอน และข้อผิดพลาดในการตรวจสอบความถูกต้องที่อาจเกิดขึ้นภายในโครงสร้างที่เป็นระเบียบและบำรุงรักษาได้ ซึ่งเป็นสิ่งสำคัญสำหรับการสร้างกระบวนการลงทะเบียนหรือชำระเงินที่เป็นมิตรต่อผู้ใช้ โดยเฉพาะอย่างยิ่งสำหรับผู้ใช้ต่างชาติที่อาจมีความคาดหวังที่แตกต่างกันตามธรรมเนียมท้องถิ่นและประสบการณ์กับแพลตฟอร์มต่างๆ เช่น Facebook หรือ WeChat

3. แอปพลิเคชันแบบเรียลไทม์ (แชท, เครื่องมือทำงานร่วมกัน)

useReducer มีประโยชน์สำหรับแอปพลิเคชันแบบเรียลไทม์ เช่น เครื่องมือทำงานร่วมกันอย่าง Google Docs หรือแอปพลิเคชันส่งข้อความ มันจัดการกับเหตุการณ์ต่างๆ เช่น การรับข้อความ, การเข้าร่วม/ออกจากห้องของผู้ใช้, และสถานะการเชื่อมต่อ เพื่อให้แน่ใจว่า UI จะอัปเดตตามที่ต้องการ

            
import React, { useReducer, useEffect } from 'react';

const initialState = {
  messages: [],
  users: [],
  connectionStatus: 'connecting',
};

function chatReducer(state, action) {
  switch (action.type) {
    case 'RECEIVE_MESSAGE':
      return { ...state, messages: [...state.messages, action.payload] };
    case 'USER_JOINED':
      return { ...state, users: [...state.users, action.payload] };
    case 'USER_LEFT':
      return { ...state, users: state.users.filter(user => user.id !== action.payload.id) };
    case 'SET_CONNECTION_STATUS':
      return { ...state, connectionStatus: action.payload };
    default:
      return state;
  }
}

function ChatRoom() {
  const [state, dispatch] = useReducer(chatReducer, initialState);

  useEffect(() => {
    // Establish WebSocket connection (example):
    const socket = new WebSocket('wss://your-websocket-server.com');

    socket.onopen = () => dispatch({ type: 'SET_CONNECTION_STATUS', payload: 'connected' });
    socket.onmessage = (event) => dispatch({ type: 'RECEIVE_MESSAGE', payload: JSON.parse(event.data) });
    socket.onclose = () => dispatch({ type: 'SET_CONNECTION_STATUS', payload: 'disconnected' });

    return () => socket.close(); // Cleanup on unmount
  }, []);

  // Render messages, user list, and connection status based on the state
  return (
    <div>
      <p>Connection Status: {state.connectionStatus}</p>
      <!-- UI for displaying messages, user list, and sending messages -->
    </div>
  );
}

            

              
                Copy
              
            
          

ตัวอย่างนี้เป็นพื้นฐานสำหรับการจัดการแชทแบบเรียลไทม์ state จะจัดการการจัดเก็บข้อความ ผู้ใช้ที่อยู่ในแชท และสถานะการเชื่อมต่อ hook useEffect รับผิดชอบในการสร้างการเชื่อมต่อ WebSocket และจัดการข้อความที่เข้ามา วิธีการนี้สร้างส่วนติดต่อผู้ใช้ที่ตอบสนองและไดนามิกซึ่งรองรับผู้ใช้ทั่วโลก

แนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้ useReducer

เพื่อใช้ useReducer อย่างมีประสิทธิภาพและสร้างแอปพลิเคชันที่บำรุงรักษาได้ ลองพิจารณาแนวทางปฏิบัติที่ดีที่สุดเหล่านี้:

• กำหนด Action Types: ใช้ค่าคงที่สำหรับ action types ของคุณ (เช่น const INCREMENT = 'INCREMENT';) ซึ่งช่วยลดการพิมพ์ผิดและปรับปรุงความสามารถในการอ่านโค้ด
• ทำให้ Reducers เป็น Pure Function: Reducers ควรเป็น pure function ไม่ควรมี side effects เช่น การแก้ไขตัวแปรส่วนกลางหรือการเรียก API reducer ควรคำนวณและส่งคืน state ใหม่โดยอิงจาก state ปัจจุบันและ action เท่านั้น
• การอัปเดต State แบบ Immutable: อัปเดต state แบบ immutable เสมอ อย่าแก้ไขอ็อบเจกต์ state โดยตรง แต่ให้สร้างอ็อบเจกต์ใหม่พร้อมการเปลี่ยนแปลงที่ต้องการโดยใช้ spread syntax (...) หรือ Object.assign() ซึ่งจะช่วยป้องกันพฤติกรรมที่ไม่คาดคิดและทำให้การดีบักง่ายขึ้น
• จัดโครงสร้าง Actions ด้วย Payloads: ใช้คุณสมบัติ payload ใน actions ของคุณเพื่อส่งข้อมูลไปยัง reducer ซึ่งทำให้ actions ของคุณมีความยืดหยุ่นมากขึ้นและช่วยให้คุณจัดการกับการอัปเดต state ได้หลากหลายขึ้น
• ใช้ Context API สำหรับ Global State: หาก state ของคุณจำเป็นต้องแชร์ระหว่างคอมโพเนนต์หลายตัว ให้รวม useReducer เข้ากับ Context API ซึ่งเป็นวิธีที่สะอาดและมีประสิทธิภาพในการจัดการ global state โดยไม่ต้องเพิ่ม dependency ภายนอกอย่าง Redux
• แบ่งย่อย Reducers สำหรับตรรกะที่ซับซ้อน: สำหรับตรรกะของ state ที่ซับซ้อน ให้พิจารณาแบ่ง reducer ของคุณออกเป็นฟังก์ชันย่อยๆ ที่จัดการได้ง่ายขึ้น ซึ่งจะช่วยเพิ่มความสามารถในการอ่านและบำรุงรักษา นอกจากนี้คุณยังสามารถจัดกลุ่ม actions ที่เกี่ยวข้องกันภายในส่วนเฉพาะของฟังก์ชัน reducer ได้อีกด้วย
• ทดสอบ Reducers ของคุณ: เขียน unit test สำหรับ reducer ของคุณเพื่อให้แน่ใจว่ามันจัดการกับ actions และ state เริ่มต้นต่างๆ ได้อย่างถูกต้อง นี่เป็นสิ่งสำคัญในการรับประกันคุณภาพของโค้ดและป้องกันการถดถอย (regressions) การทดสอบควรครอบคลุมทุกสถานการณ์ที่เป็นไปได้ของการเปลี่ยนแปลง state
• พิจารณาการเพิ่มประสิทธิภาพ: หากการอัปเดต state ของคุณมีการคำนวณที่ซับซ้อนหรือกระตุ้นการ re-render บ่อยครั้ง ให้ใช้เทคนิค memoization เช่น useMemo เพื่อเพิ่มประสิทธิภาพของคอมโพเนนต์ของคุณ
• เอกสารประกอบ (Documentation): จัดทำเอกสารที่ชัดเจนเกี่ยวกับ state, actions และวัตถุประสงค์ของ reducer ของคุณ ซึ่งจะช่วยให้นักพัฒนาคนอื่นๆ เข้าใจและบำรุงรักษาโค้ดของคุณได้

บทสรุป

useReducer hook เป็นเครื่องมือที่ทรงพลังและหลากหลายสำหรับการจัดการ state ที่ซับซ้อนในแอปพลิเคชัน React มันมีประโยชน์มากมาย รวมถึงตรรกะของ state ที่รวมศูนย์ การจัดระเบียบโค้ดที่ดีขึ้น และความสามารถในการทดสอบที่เพิ่มขึ้น โดยการปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดและทำความเข้าใจแนวคิดหลักของมัน คุณสามารถใช้ useReducer เพื่อสร้างแอปพลิเคชัน React ที่แข็งแกร่ง บำรุงรักษาได้ และมีประสิทธิภาพมากขึ้น รูปแบบนี้ช่วยให้คุณสามารถรับมือกับความท้าทายในการจัดการ state ที่ซับซ้อนได้อย่างมีประสิทธิภาพ ช่วยให้คุณสร้างแอปพลิเคชันที่พร้อมสำหรับระดับโลกซึ่งมอบประสบการณ์ผู้ใช้ที่ราบรื่นทั่วโลก

เมื่อคุณเจาะลึกการพัฒนา React มากขึ้น การนำรูปแบบ useReducer เข้ามาในชุดเครื่องมือของคุณจะนำไปสู่ codebase ที่สะอาดขึ้น ปรับขนาดได้ง่ายขึ้น และบำรุงรักษาได้ง่ายขึ้นอย่างไม่ต้องสงสัย อย่าลืมพิจารณาความต้องการเฉพาะของแอปพลิเคชันของคุณเสมอและเลือกแนวทางการจัดการ state ที่ดีที่สุดสำหรับแต่ละสถานการณ์ ขอให้สนุกกับการเขียนโค้ด!